$map1width: 26vw;
$music_img: 'http://p3.music.126.net/BJgUd9aD9gpougZFASRTTw==/18548761162235571.jpg';
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.map1, .map2, .map3 {
  position: absolute;
}

.map1 {
  width: $map1width;
  height: $map1width;
  -webkit-border-radius: 43% 38% 40% 45%;
  -moz-border-radius: 43% 38% 40% 45%;
  border-radius: 43% 38% 40% 45%;
  background: rgba(40, 61, 81, 0.6);
  z-index: 1;
  animation: myfirst2 22s infinite linear;
}

.map2 {
  background: rgba(49, 63, 77, 0.6);
  z-index: 4;
  -webkit-border-radius: 45% 39% 41% 42%;
  -moz-border-radius: 45% 39% 41% 42%;
  border-radius: 45% 39% 41% 42%;
  //opacity: 0.2;
  animation: myfirst 20s infinite linear;
}

.map3 {
  z-index: 3;
}
.map4{
  width: 10vw;
  height: 10vw;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  //background: url($music_img) no-repeat 100% 100%;
  z-index: 4;
  animation: myfirst 20s infinite linear;
}

.map1{
}

.map2{
  width: 70%
}

.map3{
  width: 65%;
  animation: myfirst 20s infinite linear;
}
@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


